<template>
  <div class="serve-record">
      <h3>服务记录</h3>
      <div class="status">
          <div class="queryconditions">
              <Row>
                  <i-col span="2">
                      <span>查询条件</span>
                  </i-col>
                  <i-col span="22">
                      <Form :model="formItem" :label-width="60" style="font-size: 14px;">
                          <Row>
                              <i-col span="6">
                                  <FormItem label="开始时间">
                                      <DatePicker  type="date" v-model="formItem.date"></DatePicker>
                                  </FormItem>
                              </i-col>
                              <i-col span="6" id="endTime">
                                  <FormItem label="结束时间">
                                     <DatePicker type="date" v-model="formItem.date"></DatePicker>
                                  </FormItem>
                              </i-col>
                            <i-col span="2">
                              <button class="search">搜索</button>
                            </i-col>
                           </Row>
                       </Form>

                  </i-col>
              </Row>
          </div>
          <div class="classification">
              <Row>
                  <i-col span="2">
                      <span>分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类</span>
                  </i-col>
                  <i-col span="22">
                      <ul v-for="item in items">
                          <li :class="{on: item.isShow}">{{item.label}}</li>
                      </ul>
                  </i-col>
              </Row>
          </div>
          <div class="orderstatus">
              <Row>
                  <i-col span="2">
                      <span>派单状态</span>
                  </i-col>
                  <i-col span="22">
                      <ul v-for="item in items1">
                          <li :class="{on: item.isShow}">{{item.label}}</li>
                      </ul>
                  </i-col>
              </Row>
          </div>
          <div class="evaluationstatus">
            <Row>
                <i-col span="2">
                    <span>评价状态</span>
                </i-col>
                <i-col span="22">
                    <ul v-for="item in items2">
                        <li :class="{on: item.isShow}">{{item.label}}</li>
                    </ul>
                </i-col>
            </Row>
        </div>
      </div>
      <div class="table">
         <Table  border :columns="columns1" :data="data" disabled-hover></Table>
         <div class="fenye">
          <pages></pages>
         </div>
      </div>
    <Modal v-model="delModal" class-name="vertical-center-modal"　class="delModal"  @on-ok="remove(index)">
      <p>确定删除么?</p>
    </Modal>
  </div>
</template>

<script>
  import ICol from "../../node_modules/iview/src/components/grid/col";
  import Pages from '../components/pages.vue'
  export default {
    components: {
        ICol,
        Pages
    },
    name: 'serve-record',
    data () {
      return {
        index:"",
        delModal:false,
        items:[
          {
            label:"派工",
            isShow: true
          },
          {
            label:"投诉",
            isShow: false
          },
        ],
        items1:[
          {
            label:"全部",
            isShow: true
          },
          {
            label:"处理中",
            isShow:false
          },
          {
            label:"处理完毕",
            isShow: false
          },
          {
            label:"处理失败",
            isShow: false
          },
        ],
        items2:[
          {
            label:"全部",
            isShow: true
          },
          {
            label:"未评价",
            isShow:false
          },
          {
            label:"已评价",
            isShow: false
          }
        ],
        formItem: {
          select: "",
        },
        columns1: [
          {
            title: '派单时间',
            key: 'date',
          },
          {
            title: '类别',
            key: 'name'
          },
          {
            title: '问题描述',
            key: 'age',
          },
          {
            title: '单号',
            key: 'address'
          },
          {
            title: '状态',
            key: 'date',
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('div',{
                  class:'btn',
                  style:{
                    marginRight: '5px',
                    display:"inline-block"
                  }
                },
                  [
                    h('i', {
                      class : 'iconfont  icon-bangzhuzhongxin-pingjia',
                      style: {
                        fontSize:"24px",
                        color:"#9ea7b4"
                      }
                    })
                ]),
                h('div',{
                    class:'btn',
                    style:{
                      display:"inline-block"
                    },
                    on: {
                      click: () => {
                        this.delModal=true;
                        this.index=params.index
                      }
                    }
                  },
                  [
                    h('i', {
                      class : 'iconfont  icon-bangzhuzhongxin-shanchu',
                      style: {
                        fontSize:"24px",
                        color:"#9ea7b4"
                      }
                    })
                  ])
              ])
            }
          }
        ],
        data: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ]
      }
    },
    methods:{
      remove (index) {
        this.data.splice(index, 1);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
 .serve-record #endTime{
    margin-left: 10px;
  }
  .serve-record{
    background: #f5f7f9;
    width:1120px;
    margin: 25px auto 70px auto;
  }
 .serve-record h3{
    width: 1120px;
    text-align: left;
    margin: auto;
    color: #656a75;
    font-size: 16px;
    margin-top: 25px;
  }
 .serve-record .status{
    width:1120px;
    height: 224px;
    background: #fff;
    border-radius: 20px;
    padding:12px 30px;
    margin-top: 20px;
  }
 .serve-record .queryconditions span{
    line-height: 28px;
    font-size: 14px;
  }
 .serve-record .classification span,.orderstatus span,.evaluationstatus span{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
 .serve-record .status li{
    color: #83868f;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    width: 50px;
    height:30px;
    border-radius: 50px;
    cursor: pointer;
    float:left;
    margin-right: 15px;

  }
 .serve-record .on{
    background: #464c5b;
    color:#fff !important;
  }
 .serve-record .table{
    margin-top: 30px;
  }
 .serve-record .orderstatus,.evaluationstatus{
    margin-top: 20px;
  }
 .serve-record .table .fenye{
    background: #fff;
    width:1120px;
    height: 50px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    line-height: 50px;
  }
 .queryconditions .search{
   width: 50px;
   text-align: center;
   height: 30px;
   line-height: 30px;
   background: rgb(70, 76, 91);
   border-radius: 20px;
   outline: none;
   border: none;
   color: #fff;
   font-size: 14px;
   margin: 4px 0;
   cursor: pointer;
 }
 /*删除弹窗样式*/
.delModal .ivu-modal{width:260px !important;}
 .delModal .ivu-modal-content{
    width:260px;
    height:160px;
    text-align: center;
    border-radius: 20px;
  }
 .delModal .ivu-modal-body{
    height:110px;
    line-height: 110px;
    padding: 0;
    border-bottom: 1px solid #e3e8ee;
    box-sizing: border-box;
  }
 .delModal .ivu-modal-body>p{
   font-size: 14px;
   color:#464c5b;
 }
 .delModal .ivu-modal-footer{
    padding: 0;
    border:none;
    text-align: center;
    display: flex;
  }
 .delModal .ivu-btn-text>span{
   border-right: 1px solid #e3e8ee;
   box-sizing: border-box;
 }
 .delModal .ivu-btn-large>span{
   display: block;
   width: 130px;
   text-align: center;
   line-height: 50px;
   color:#9ea7b4;
   font-size: 14px;
 }
 .delModal .ivu-btn-large{
   padding: 0;
   border:none;
 }
 .delModal .ivu-modal-footer button+button{margin-left: 0;}
 .ivu-btn-text{border:none;}
 .ivu-btn-large:nth-child(2){border-radius: 20px;}
 .ivu-btn-primary {
   background-color: #fff;
   border: none;
 }
 .delModal .ivu-modal-close{display: none}
 .delModal .ivu-btn-text:hover span{
   color:#464c5b;
 }
 .delModal .ivu-btn-primary:hover span{
   color:#464c5b;
 }
 .delModal .ivu-btn-primary:hover{
   background-color: #fff;
   border:none;
 }
 .delModal .vertical-center-modal {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .delModal .ivu-modal{
   top: 0;
 }
</style>
